<template>
  <div>
    <div>
      <el-button type="primary" @click="addDepartments">添加组织</el-button>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="创建时间" prop="created_at" width="180" />
        <el-table-column label="组织名称" prop="dept_name" width="180" />
        <el-table-column label="是否正常启用" prop="dept_status" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="updataDepartment(scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="delDepartments(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              v-if="scope.row.parent_id == 0"
              size="mini"
              type="text"
              @click="seeChildren(scope.row.id)"
            >
              查看子级
            </el-button>
            <el-button
              v-if="scope.row.parent_id !== 0"
              size="mini"
              type="text"
              @click="returnChildren(scope.row.scheduling_date)"
            >
              返回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="科室" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" label-width="80px" :model="form">
        <el-form-item label="科室名称">
          <el-input v-model="parameter.dept_name" />
        </el-form-item>
        <el-form-item label="科室简介">
          <el-input v-model="parameter.dept_desc" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select
            v-model="enable"
            placeholder="是否启用"
            @change="enableChange"
          >
            <el-option
              v-for="item in enableShow"
              :key="item.dept_status"
              :label="item.name"
              :value="item.dept_status"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上级组织">
          <el-select
            v-model="selectValue"
            clearable
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in optionData"
              :key="item.id"
              :label="item.dept_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作方式">
          <el-select
            v-model="workModeValue"
            clearable
            placeholder="请选择"
            @change="workModeChange"
          >
            <el-option
              v-for="item in workMode"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getDepartmentList,
    addDepartment,
    delDepartment,
  } from '@/api/addOrganization'

  export default {
    name: 'Reception',
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        form: {},
        selectValue: '',
        pid: 0,
        optionData: [],
        parameter: {},
        enable: '',
        enableShow: [
          {
            dept_status: 'Y',
            name: '是',
          },
          {
            dept_status: 'N',
            name: '否',
          },
        ],
        workMode: [
          {
            id: 'mec_inside',
            name: '机构内工作方式',
          },
          {
            id: 'mec_external',
            name: '机构外工作方式',
          },
          {
            id: 'mec_other',
            name: '其他工作方式',
          },
        ],
        workModeValue: '',
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.Department()
      },
      // 获取组织 科室
      Department() {
        getDepartmentList(this.pid).then((res) => {
          this.tableData = res.data.data
        })
      },
      // 修改组织
      updataDepartment(e) {
        this.parameter.id = e
        this.addDepartments()

        //
      },
      // 删除组织
      delDepartments(e) {
        const id = e
        delDepartment(id).then(() => {
          this.init()
        })
      },
      // 添加组织
      addDepartments() {
        this.dialogVisible = true
        getDepartmentList(this.pid).then((res) => {
          this.optionData = res.data.data
          const aaa = {
            id: 0,
            dept_name: '顶级组织',
          }
          this.optionData.push(aaa)
        })
      },
      // 下拉框选择组织
      handleChange(e) {
        this.parameter.parent_id = e
      },
      // 查看子级
      seeChildren(e) {
        getDepartmentList(e).then((res) => {
          this.tableData = res.data.data
        })
      },
      // 返回上级
      returnChildren() {
        this.Department()
      },
      // 是否启用
      enableChange(e) {
        this.parameter.dept_status = e
      },
      //工作方式
      workModeChange(e) {
        this.parameter.dept_work_type = e
      },
      // 新增组织提交按钮
      SubmitClick() {
        addDepartment(this.parameter).then(() => {
          this.init()
          this.parameter = {}
        })
        this.dialogVisible = false
      },
    },
  }
</script>

<style></style>
